<template>
  <div class="container">
    <div class="logo">
      <logoSvg style="width: 40px; height: 40px" />
      沐雨晨曦
    </div>
    <div class="form">
      <div class="title">账号登录</div>
      <a-divider orientation="center">欢迎您登录系统</a-divider>
      <a-form ref="loginForm" :model="userInfo" class="login-form" layout="vertical" @submit="handleSubmit">
        <a-form-item field="account" :rules="[{ required: true, message: '用户名不能为空' }]" :validate-trigger="['change', 'blur']" hide-label>
          <a-input v-model="userInfo.account" placeholder="用户名">
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item field="password" :rules="[{ required: true, message: '密码不能为空' }]" :validate-trigger="['change', 'blur']" hide-label>
          <a-input-password v-model="userInfo.password" placeholder="密码" allow-clear>
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>
        <a-button ref="loginButton" type="primary" html-type="submit" long :loading="loading">登录</a-button>
      </a-form>
      <a-divider />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue'
  import { ValidatedError } from '@arco-design/web-vue/es/form/interface'
  import { reactive } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { LoginData } from '@/api/user'
  import useLoading from '@/hooks/loading'
  import { useUserStore } from '@/store'

  const router = useRouter()
  const route = useRoute()
  const { loading, setLoading } = useLoading()
  const userStore = useUserStore()
  const userInfo = reactive({
    account: 'admin',
    password: 'admin'
  })

  const handleSubmit = (data: { values: Record<string, LoginData>; errors: Record<string, ValidatedError> | undefined }) => {
    if (!data.errors) {
      setLoading(true)
      userStore
          .login(data.values)
          .then(() => {
            const { redirect } = route.query
            router.push({ path: (redirect as string) || '/dashboard/workplace' })
            Message.success(`欢迎使用`)
          })
          .catch((error) => {
            if (import.meta.env.NODE_ENV === 'development') {
              console.log(error)
            }
            console.log(error)
            Message.error('登录失败')
            setLoading(false)
          })
    }
  }
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(135deg, #0396ff 10%, #abdcff 100%);

  .logo,
  .form {
    width: 400px;
    height: 466px;
  }

  .logo {
    margin: 0 auto;
    background-image: linear-gradient(135deg, #abdcff 10%, #0396ff 100%);
  }

  .form {
    padding: 25px 32px;
    background-color: #fff;

    .title {
      color: #0b4894;
      font-weight: 600;
      font-size: 28px;
      line-height: 40px;
      text-align: center;
    }

    :deep(.arco-form) {
      margin-top: 42px;
      margin-bottom: 71px;
    }

    :deep(.arco-divider-text) {
      color: #999;
      font-weight: 400;
      font-size: 14px;
      background: #fff;
    }

    :deep(.arco-btn-size-medium) {
      height: 40px;
      min-height: 40px;
    }

    :deep(.arco-input-wrapper .arco-input.arco-input-size-medium) {
      height: 40px;
      min-height: 40px;
    }
  }
}
</style>
